<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" width="60%">
      <el-form :model="formData" :rules="rules" ref="dataFrom" label-width="150px">
<!--        <el-form-item label="商品id" prop="id">-->
<!--          <el-input placeholder="如需要更新数据请输入对应id，如需新增数据则不输入此项" v-model="formData.id"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="formData.name">hhh</el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="description">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="formData.price"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="formData.status"></el-input>
        </el-form-item>
        <el-form-item label="照片" prop="photo">
<!--          <el-input v-model="formData.photo"></el-input>-->
          <el-upload
              class="upload-demo"
              action=""
              :on-change="handleChange"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="appendFile"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>

        </el-form-item>
        <el-form-item label="所属门类" prop="categoryId">
          <el-input v-model="formData.categoryId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uploadData">立即上传</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {uuid as $uuid} from "vue-uuid";
import qs from "qs";
import axios from 'axios';

export default {
  name: "addproduct",
  data() {
    return{
      fileList:[],
      filename:'',
      imageUrl:'',
      formData:{
        id:'',
        name:"",
        description:"",
        price:"",
        status:"",
        photo:"",
        categoryId:"",

      },
      rules:{
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          //{ type: 'double', message: '必须为数字值'}

        ],
      },
      dialogVisible: false,
      infoData:[],
      showAll:false
    }
  },
  methods:{
    uploadData(){
      this.$refs.dataFrom.validate((valid) => {
        if (valid) {
          let that=this;
          let url=that.$URL.addproduct;

          for (let upData of this.fileList) {
            this.filename=upData.name
          }
          console.log("filedata")
          console.log(this.filename)


      let uploadproductParams = qs.stringify({
        id:that.formData.id,
        name:that.formData.name,
        description:that.formData.description,
        price:that.formData.price,
        status:that.formData.status,
        photo:that.filename,
        categoryId:that.formData.categoryId,
      }, { indices: false });
          console.log(uploadproductParams)

          console.log(url)
          debugger;
          let y = "http://39.96.93.100:6677/product/saveOrUpdate"
          that.$axios.post(that.$URL.addproduct, uploadproductParams).then(
              res => {
                if (res.status == 200) {
                  that.$message({
                    message: "上传成功",
                    type: 'success'
                  });
                  //that.$refs.formData.resetFields();
                } else {
                  that.$message({
                    message: "上传失败",
                    type: 'error'
                  });
                }
              }
          );
        }
      });
    },

    appendFile(file)
    {
      this.filename = file.file
      console.log("filename"+file.file);
      console.log(this.fileList)
      //this.formData.append('file',file.file);
    },

    handleChange(file, fileList) {
      this.fileList = fileList

      console.log(file, fileList);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },


    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      this.imageUrl = file;
      console.log(file)
      console.log("before"+this.imageUrl.file)
      return isJPG && isLt2M;
    }
  },
  created() {
    let that=this;
    this.$Bus.$on('addproduct',param=>{
      that.dialogVisible=param.dialogVisible
      that.infoData=param.infoData
      that.showAll=false
    })
  }
}
</script>

<style scoped>

</style>
